<kubernetes-view-header title="Advanced deployment" state="kubernetes.deploy" view-ready="ctrl.state.viewReady">
  Deploy Kubernetes resources
</kubernetes-view-header>

<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="ctrl.state.viewReady">
  <kubernetes-feedback-panel></kubernetes-feedback-panel>

  <div class="row">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-body>
          <uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
            <uib-tab index="0">
              <uib-tab-heading> <i class="fa fa-code space-right" aria-hidden="true"></i> Deploy </uib-tab-heading>

              <form class="form-horizontal" style="margin-top: 20px;">
                <div class="form-group">
                  <label for="target_node" class="col-lg-1 col-sm-2 control-label text-left">Namespace</label>
                  <div class="col-lg-11 col-sm-10">
                    <select class="form-control" ng-model="ctrl.formValues.Namespace" ng-options="namespace.Name as namespace.Name for namespace in ctrl.namespaces"></select>
                  </div>
                </div>
                <!-- deploy-type -->
                <div class="col-sm-12 form-section-title">
                  Deployment type
                </div>
                <div class="form-group"></div>
                <div class="form-group" style="margin-bottom: 0;">
                  <div class="boxselector_wrapper">
                    <div>
                      <input type="radio" id="method_kubernetes" ng-model="ctrl.state.DeployType" ng-value="ctrl.ManifestDeployTypes.KUBERNETES" />
                      <label for="method_kubernetes">
                        <div class="boxselector_header">
                          <i class="fa fa-cubes" aria-hidden="true" style="margin-right: 2px;"></i>
                          Kubernetes
                        </div>
                        <p>Kubernetes manifest format</p>
                      </label>
                    </div>
                    <div>
                      <input type="radio" id="method_compose" ng-model="ctrl.state.DeployType" ng-value="ctrl.ManifestDeployTypes.COMPOSE" />
                      <label for="method_compose">
                        <div class="boxselector_header">
                          <i class="fab fa-docker" aria-hidden="true" style="margin-right: 2px;"></i>
                          Compose
                        </div>
                        <p>docker-compose format</p>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- !deploy-type -->

                <!-- build method -->
                <div class="col-sm-12 form-section-title">
                  Build method
                </div>
                <div class="form-group"></div>
                <div class="form-group" style="margin-bottom: 0;">
                  <div class="boxselector_wrapper">
                    <div>
                      <input type="radio" id="build_method_git" ng-model="ctrl.state.BuildMethod" ng-value="ctrl.BuildMethods.GIT" />
                      <label for="build_method_git">
                        <div class="boxselector_header">
                          <i class="fab fa-github" aria-hidden="true" style="margin-right: 2px;"></i>
                          Git Repository
                        </div>
                        <p>Use a git repository</p>
                      </label>
                    </div>
                    <div>
                      <input type="radio" id="build_method_web_editor" ng-model="ctrl.state.BuildMethod" ng-value="ctrl.BuildMethods.WEB_EDITOR" />
                      <label for="build_method_web_editor">
                        <div class="boxselector_header">
                          <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
                          Web editor
                        </div>
                        <p>Use our Web editor</p>
                      </label>
                    </div>
                  </div>
                </div>

                <!-- !deploy-type -->

                <!-- repository -->
                <div ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT">
                  <div class="col-sm-12 form-section-title">
                    Git repository
                  </div>
                  <div class="form-group">
                    <span class="col-sm-12 text-muted small">
                      You can use the URL of a git repository.
                    </span>
                  </div>
                  <div class="form-group">
                    <label for="stack_repository_url" class="col-sm-2 control-label text-left">Repository URL</label>
                    <div class="col-sm-10">
                      <input
                        type="text"
                        class="form-control"
                        ng-model="ctrl.formValues.RepositoryURL"
                        id="stack_repository_url"
                        placeholder="https://github.com/portainer/deployment-repository"
                      />
                    </div>
                  </div>
                  <div class="form-group">
                    <span class="col-sm-12 text-muted small">
                      Specify a reference of the repository using the following syntax: branches with
                      <code>refs/heads/branch_name</code> or tags with <code>refs/tags/tag_name</code>. If not specified, will use the default <code>HEAD</code> reference normally
                      the <code>master</code> branch.
                    </span>
                  </div>
                  <div class="form-group">
                    <label for="stack_repository_url" class="col-sm-2 control-label text-left">Repository reference</label>
                    <div class="col-sm-10">
                      <input
                        type="text"
                        class="form-control"
                        ng-model="ctrl.formValues.RepositoryReferenceName"
                        id="stack_repository_reference_name"
                        placeholder="refs/heads/master"
                      />
                    </div>
                  </div>
                  <div class="form-group">
                    <span class="col-sm-12 text-muted small">
                      Indicate the path to the yaml file from the root of your repository.
                    </span>
                  </div>
                  <div class="form-group">
                    <label for="stack_repository_path" class="col-sm-2 control-label text-left">Manifest path</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" ng-model="ctrl.formValues.FilePathInRepository" id="stack_manifest_path" placeholder="deployment.yml" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label class="control-label text-left">
                        Authentication
                      </label>
                      <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="ctrl.formValues.RepositoryAuthentication" /><i></i> </label>
                    </div>
                  </div>
                  <div class="form-group" ng-if="ctrl.formValues.RepositoryAuthentication">
                    <span class="col-sm-12 text-muted small">
                      If your git account has 2FA enabled, you may receive an
                      <code>authentication required</code> error when deploying your stack. In this case, you will need to provide a personal-access token instead of your password.
                    </span>
                  </div>
                  <div class="form-group" ng-if="ctrl.formValues.RepositoryAuthentication">
                    <label for="repository_username" class="col-sm-1 control-label text-left">Username</label>
                    <div class="col-sm-11 col-md-5">
                      <input type="text" class="form-control" ng-model="ctrl.formValues.RepositoryUsername" name="repository_username" placeholder="myGitUser" />
                    </div>
                    <label for="repository_password" class="col-sm-1 control-label text-left">
                      Password
                    </label>
                    <div class="col-sm-11 col-md-5">
                      <input type="password" class="form-control" ng-model="ctrl.formValues.RepositoryPassword" name="repository_password" placeholder="myPassword" />
                    </div>
                  </div>
                </div>
                <!-- !repository -->

                <!-- editor -->
                <div ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.WEB_EDITOR">
                  <div class="col-sm-12 form-section-title">
                    Web editor
                  </div>
                  <div class="form-group">
                    <span class="col-sm-12 text-muted small" ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.COMPOSE">
                      <p>
                        <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                        Portainer uses <a href="https://kompose.io/" target="_blank">Kompose</a> to convert your Compose manifest to a Kubernetes compliant manifest. Be wary that
                        not all the Compose format options are supported by Kompose at the moment.
                      </p>
                      <p>
                        You can get more information about Compose file format in the
                        <a href="https://docs.docker.com/compose/compose-file/" target="_blank">official documentation</a>.
                      </p>
                    </span>
                    <span
                      class="col-sm-12 text-muted small"
                      ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.KUBERNETES && ctrl.state.BuildMethod === ctrl.BuildMethods.WEB_EDITOR"
                    >
                      <p>
                        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                        This feature allows you to deploy any kind of Kubernetes resource in this environment (Deployment, Secret, ConfigMap...).
                      </p>
                      <p>
                        You can get more information about Kubernetes file format in the
                        <a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
                      </p>
                    </span>
                  </div>

                  <div class="form-group">
                    <div class="col-sm-12">
                      <code-editor
                        identifier="kubernetes-deploy-editor"
                        placeholder="# Define or paste the content of your manifest file here"
                        yml="false"
                        value="ctrl.formValues.EditorContent"
                        on-change="(ctrl.editorUpdate)"
                      ></code-editor>
                    </div>
                  </div>
                </div>
                <!-- !editor -->
                <!-- actions -->
                <div class="col-sm-12 form-section-title">
                  Actions
                </div>
                <div class="form-group">
                  <div class="col-sm-12">
                    <button type="button" class="btn btn-primary btn-sm" ng-disabled="ctrl.disableDeploy()" ng-click="ctrl.deploy()" button-spinner="ctrl.state.actionInProgress">
                      <span ng-hide="ctrl.state.actionInProgress">Deploy</span>
                      <span ng-show="ctrl.state.actionInProgress">Deployment in progress...</span>
                    </button>
                  </div>
                </div>
                <!-- !actions -->
              </form>
            </uib-tab>

            <uib-tab index="1" disable="ctrl.state.tabLogsDisabled">
              <uib-tab-heading> <i class="fa fa-file space-right" aria-hidden="true"></i> Logs </uib-tab-heading>
              <form class="form-horizontal" style="margin-top: 20px;">
                <div class="form-group" ng-if="ctrl.state.activeTab === 1">
                  <div class="col-sm-12">
                    <code-editor identifier="kubernetes-deploy-logs" read-only="true" yml="false" value="ctrl.errorLog"></code-editor>
                  </div>
                </div>
              </form>
            </uib-tab>
          </uib-tabset>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>
</div>
